<template>
  <div class="login-page">
    <div class="bg_box"></div>
    <div class="btn_box">
      <p @click="goIphoneLogin">手机号登录</p>
      <p class="btn" @click="goNameLogin">用户名登录</p>
      <div class="footer" @click="goSign">
        <span>还没有账户，</span>
        <span class="rc">立即注册</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        pass: ""
      },
    };
  },
  created() {
    // this.$toast('提示内容');
    // localStorage.removeItem('userInfor');
    localStorage.removeItem('userInfor');
  },
  methods: {
    goIphoneLogin() {
      this.$router.push({name: 'iphoneLogin'})
    },
    goSign() {
      this.$router.push({name: 'signIn'})
    },
    goNameLogin() {
      this.$router.push({name: 'userLogin'})
    },
    async handleSubmit() {
      if (!this.ruleForm.username) {
        this.$toast('请输入用户名/账号');
        return false
      }
      if (!this.ruleForm.pass) {
        this.$toast('请输入密码');
        return false
      }
      let res = await this.$http.login({...this.ruleForm});
      if (res) {
        let userInfor = res.addInfo
        userInfor.token=res.data
        console.log(userInfor)
        localStorage.setItem("userInfor", JSON.stringify(userInfor));
        setTimeout(() => {
          this.$router.push({path:'/'})
        });
      }
    }
  }
};
</script>

<style>
.login-page {
  width: 100%;
  height: 100vh;
  padding-top: .8rem;
  background: url('../../assets/img/login/login.png')no-repeat;
  background-size: cover;
}
/* .bg_box{
  width: 5.48rem;
  height: 5.48rem;
  margin: 0 auto;
  background: url('../../assets/img/login/bg_1.png') no-repeat;
  background-size: 100% 100%;
  animation: whirl 9s linear infinite
} */
@keyframes whirl {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}
.btn_box{
  position: fixed;
  bottom: 2.2rem;
  left: .5rem;
  width: 6.5rem;
  height: 3rem;
}
.btn_box p{
  width: 100%;
  height: .94rem;
  line-height: .94rem;
  text-align: center;
  color: #fff;
  margin-bottom: .4rem;
  border-radius: .47rem;
  font-size: .34rem;
}
.btn_box p:nth-child(1){
  background: #00C8E7;
}
.btn_box p.btn{
  border: 1px solid #00C8E7;
  color: #02BAD6;
  margin-bottom: .8rem;
}
.footer{
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: .3rem;
}
.footer .rc{
  color: #02BAD6;
}
</style>
